<script setup lang="ts">
import { RoutePath } from '../../../../main/src/enums/route'
import useConfigStore from '../../../store/config'
import { isMicro } from '../../../utils'

interface IProps {
  isCollapse: boolean
}

const { isCollapse } = defineProps<IProps>()

const route = useRoute()
const router = useRouter()

const configStore = useConfigStore()

const customStyle = computed(() => {
  return {
    backgroundColor: configStore.getPageRegionColor.LOGO.background,
    color: configStore.getPageRegionColor.LOGO.text,
  }
})

const logoText = computed(() => {
  return isCollapse ? 'LOGO' : '国际化多应用微前端架构'
})

function toHome() {
  if (isMicro(route.path))
    router.push(RoutePath.home)
}
</script>

<template>
  <div
    class="app-logo"
    :style="customStyle"
    font-bold
    text-xl
    flex
    justify-center
    items-center
    :cursor="isMicro(route.path) ? 'pointer' : 'auto'"
    @click="toHome"
  >
    <span class="app-logo__text">{{ logoText }}</span>
  </div>
</template>

<style scoped>
.app-logo {
  min-width: 60px;
  padding: 0 10px;
  transition: all 0.3s ease-in-out;
}

.app-logo__text {
  display: inline-block;
  white-space: nowrap;
  transition: opacity 0.3s ease-in-out;
}
</style>
